<template>
  <div class="w_h_100">
    <div class="inlet">待办任务 > 非融批量待办 > {{ type == '1' ? '保前' : '保后' }} > <span
        class="size">项目处理</span></div>
    <div class="d_f index">
      <div class="left">
        <div class="box">
          <div>批次资料卡</div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">批次号：</div>
            <div class="input d_f a_i_c">
              <div class="customerName">{{ information.batchNo }}</div>
              <div class="success_status" v-if="information.customerStatus == 0">
                <img src="../../../assets/normal.png" alt="" class="status_img">
                <span>正常</span>
              </div>
              <div class="success_status" v-if="information.customerStatus == 1">
                <img src="../../../assets/normal.png" alt="" class="status_img">
                <span>在途</span>
              </div>
              <div class="pause_status" v-if="information.customerStatus == 2">
                <img src="../../../assets/pause.png" alt="" class="status_img">
                <span>暂停</span>
              </div>
              <div class="settle_status" v-if="information.customerStatus == 3">
                <img src="../../../assets/settle.png" alt="" class="status_img">
                <span>结清</span>
              </div>
              <div class="settle_status" v-if="information.customerStatus == 4">
                <img src="../../../assets/settle.png" alt="" class="status_img">
                <span>解保</span>
              </div>
              <div class="abnormal_status" v-if="information.customerStatus == 5">
                <img src="../../../assets/abnormal.png" alt="" class="status_img">
                <span>逾期</span>
              </div>
              <div class="extension_status" v-if="information.customerStatus == 6">
                <img src="../../../assets/extension.png" alt="" class="status_img">
                <span>展期</span>
              </div>
              <div class="noRead_status1" v-if="information.customerStatus == 7">
                <img src="../../../assets/noRead.png" alt="" class="status_img">
                <span>预警</span>
              </div>
              <div class="compensation_status" v-if="information.customerStatus == 8">
                <img src="../../../assets/compensation.png" alt="" class="status_img">
                <span>代偿</span>
              </div>
            </div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">当前任务：</div>
            <div class="input d_f a_i_c task">{{ information.nodeName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">产品名称：</div>
            <div class="input d_f a_i_c">{{ information.productName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">经办行：</div>
            <div class="input d_f a_i_c">{{ information.agencyBranchName || "-" }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">地区：</div>
            <div class="input d_f a_i_c">{{ information.area }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">进件人：</div>
            <div class="input d_f a_i_c">{{ information.submitter }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">进件人电话：</div>
            <div class="input d_f a_i_c">{{ information.submitterMobile }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">业务部门：</div>
            <div class="input d_f a_i_c">{{ information.deptName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">客户数量：</div>
            <div class="input d_f a_i_c">{{ information.count }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">总申请金额：</div>
            <div class="input d_f a_i_c">{{ information.totalMoney }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">进件时间：</div>
            <div class="input d_f a_i_c">{{ information.applyTime }}</div>
          </div>
        </div>
        <singleStrokeFiling type="1"></singleStrokeFiling>
      </div>
      <div class="right">
        <div class="d_f">
          <div v-for="(item, index) in list" :key="index" class="tab d_f j_c_c a_i_c"
            :class="{ 'm_l_10': index > 0, 'active': current == index }" @click="current = index">{{ item.name }} </div>
        </div>
        <div class="forms" v-if="current == 0">
          <div class="w_100 headTips m_t_20">
            <div class="d_f a_i_c">
              <div class="line"></div>
              项目处理
            </div>
          </div>
          <div class="content">
            <div class="d_f j_c_s_b a_i_c" v-if="!isExpand">
              <div class="searchForm">
                <myform :fields="fields" :model="values" class="m_t_10" :options="options">
                </myform>
              </div>
              <div class="btn d_f a_i_c">
                <el-button @click="resetting">重置</el-button>
                <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
                <span class="expand d_f a_i_c" @click="screen(true)">展开筛选 <img src="../../../assets/below.png" alt=""
                    class="m_l_5"></span>
              </div>
            </div>
            <div v-else>
              <div class="searchForm">
                <myform :fields="fields1" :model="values" class="m_t_10" :options="options"
                  @handleSelect="handleSelect">
                </myform>
              </div>
              <div class="d_f j_c_s_b">
                <span></span>
                <div class="btn d_f a_i_c">
                  <el-button @click="resetting">重置</el-button>
                  <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
                  <span class="expand d_f a_i_c" @click="screen(false)">收起筛选 <img src="../../../assets/up.png" alt=""
                      class="m_l_5"></span>
                </div>
              </div>
            </div>

            <div class="d_f j_c_s_b a_i_c m_t_20">
              <div class="d_f a_i_c">
                <div class="all" v-if="!isChecked" @click="isChecked = true">批次全选</div>
                <div class="cancelAll" v-else @click="isChecked = false">取消批次全选</div>
                <el-button type="danger" plain @click="openBack" v-if="isBack"
                  v-hasPerm="'noFinancingBatchBack'">回退</el-button>
                <el-button type="primary" plain @click="registration" v-if="isLoan"
                  v-hasPerm="'noFinancingBatchRegistration'">批量登记未放款</el-button>
                <el-button type="primary" plain @click="repayment" v-if="isPay"
                  v-hasPerm="'noFinancingBatchRegisterRepayment'">批量登记还款</el-button>
                <!-- <el-button type="primary" plain @click="allocation" v-if="isHandle"
                  v-hasPerm="'noFinancingBatchAssignHandlers'">分配处理人</el-button> -->
                <el-button type="primary" plain @click="batchApproval" v-if="isApproval"
                  v-hasPerm="'noFinancingBatchBatchApproval'">批量审批</el-button>
                <el-button :icon="Upload" @click="dialogVisible2 = true"
                  v-hasPerm="'noFinancingBatchBatchUpload'">批量文件上传</el-button>
              </div>
              <div class="d_f a_i_c">
                <span class="tips">处理完全部项目后可提交下一流程，当前还有 <span class="num">{{ count }}</span>个项目未处理</span>
                <el-button type="info" class="m_l_10" v-if="count > 0" v-hasPerm="'noFinancingBatchSubmit'">提交下一流程
                  <el-icon>
                    <Right />
                  </el-icon></el-button>
                <el-button type="primary" class="m_l_10" v-else @click="submissionProcess"
                  v-hasPerm="'noFinancingBatchSubmit'">提交下一流程 <el-icon>
                    <Right />
                  </el-icon></el-button>
              </div>
            </div>
            <mytable :fields="tableFields" @selecSelection="selecSelection" :isSelection="true" width="130"
              ref="tableRef" :values="values" type="isCommit" :isDisabled="true" api="batchDetailPage" class="m_t_10"
              @init="init">
              <template v-slot:timeLimit="{ row }">
                <span>{{ row.timeLimit || '0' }}天</span>
              </template>
              <template v-slot:loanResult;="{ row }">
                <span v-if="row.loanResult==0">未处理</span>
                <span v-if="row.loanResult==1">未放款</span>
                <span v-if="row.loanResult==2">已放款</span>
              </template>
              <template v-slot:masterStatus="{ row }">
                <div class="success_status" v-if="row.masterStatus == 0">
                <img src="../../../assets/normal.png" alt="" class="status_img">
                <span>正常</span>
              </div>
              <div class="success_status" v-if="row.masterStatus == 1">
                <img src="../../../assets/normal.png" alt="" class="status_img">
                <span>在途</span>
              </div>
              <div class="pause_status" v-if="row.masterStatus == 2">
                <img src="../../../assets/pause.png" alt="" class="status_img">
                <span>暂停</span>
              </div>
              <div class="settle_status" v-if="row.masterStatus == 3">
                <img src="../../../assets/settle.png" alt="" class="status_img">
                <span>结清</span>
              </div>
              <div class="settle_status" v-if="row.masterStatus == 4">
                <img src="../../../assets/settle.png" alt="" class="status_img">
                <span>解保</span>
              </div>
              <div class="abnormal_status" v-if="row.masterStatus == 5">
                <img src="../../../assets/abnormal.png" alt="" class="status_img">
                <span>逾期</span>
              </div>
              <div class="extension_status" v-if="row.masterStatus == 6">
                <img src="../../../assets/extension.png" alt="" class="status_img">
                <span>逾期</span>
              </div>
              <div class="noRead_status1" v-if="row.masterStatus == 7">
                <img src="../../../assets/noRead.png" alt="" class="status_img">
                <span>预警</span>
              </div>
              <div class="compensation_status" v-if="row.masterStatus == 8">
                <img src="../../../assets/compensation.png" alt="" class="status_img">
                <span>代偿</span>
              </div>
              </template>
              <template v-slot:isConsistent="{ row }">
                <span v-if="row.isConsistent == 1" class="success">是</span>
                <span v-else class="error">否</span>
              </template>
              <template v-slot:approveStatus="{ row }">
                <span v-if="row.approveStatus == 0" >待处理</span>
                <span v-if="row.approveStatus == 1" >待审批</span>
                <span v-if="row.approveStatus == 2" >已通过</span>
                <span v-if="row.approveStatus == 3" >已拒绝</span>
                <span v-if="row.approveStatus == 4" >已取消</span>
                <span v-if="row.approveStatus == 5" >正常</span>
                <span v-if="row.approveStatus == 6" >超时</span>
              </template>
              <template v-slot:operation="{ row }">
                <div class="d_f j_c_s_b">
                  <el-button type="primary" v-if="row.isCommit == 0" size="small" :icon="EditPen" plain
                    @click="handle(row)">项目处理</el-button>
                  <span v-else class="success" @click="detail(row)">已处理</span>
                </div>
              </template>
            </mytable>
          </div>
        </div>
        <div v-if="current == 1" class="forms">
          <batchDetails :information="information" disabled="0"></batchDetails>
        </div>
        <div v-if="current == 2" class="forms">
          <batchData :information="information"></batchData>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="回退" width="500" :before-close="handleClose">
      <div class="isBack">
        <myform :fields="fields2" ref="form1" labelPosition="top" :model="model" class="m_t_10">
        </myform>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="danger" @click="backQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="批量审批" width="500" :before-close="handleClose1">
      <div class="isBack">
        <myform :fields="fields3" ref="examineForm" :options="options" :rules="rules" labelPosition="top"
          :model="model1" class="m_t_10">
        </myform>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose1">取 消</el-button>
          <el-button type="primary" @click="examineQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="批量文件上传" width="700" :before-close="handleClose2">
      <div class="d_f j_c_s_b">
        <!-- <myform :fields="fields4" ref="form1" :model="model2" class="m_t_10">
        </myform> -->
        <span></span>
        <el-upload class="upload-demo" :before-upload="beforeUpload" :action="action" :headers="headers"
          :show-file-list="false" :on-success="onSuccess" multiple :limit="100000000">
          <el-button :icon="Upload">上传</el-button>
        </el-upload>

      </div>
      <mytable :fields="uploadTable" width="130" ref="tableRef" class="m_t_10" :defaultList="model2.urls"
        :isPaginationShow="false">
        <template v-slot:operation="{ row, $index }">
          <div class="d_f j_c_s_b">
            <span class="success" @click="preview(row)">预览</span>
            <el-upload class="upload-demo" :action="action" :headers="headers" :show-file-list="false"
              :on-success="onSuccess1" multiple :limit="100000000">
              <span class="edit" @click="reUpload($index)">重新上传</span>
            </el-upload>

            <span class="error" @click="deleteOut($index)">删除</span>
          </div>
        </template>
      </mytable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="fileQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible3" title="分配处理人" width="500" :before-close="handleClose3">
      <div class="isBack">
        <myform :fields="fields5" ref="allocationForm" :model="model3" class="m_t_10" :options="options" :rules="rules">
        </myform>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="allocationQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible4" title="批量登记还款" width="500" :before-close="handleClose4">
      <div class="isBack">
        <myform :fields="fields6" ref="repaymentForm" :model="model4" class="m_t_10" :options="options" :rules="rules">
        </myform>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="repaymentQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible5" title="提交下一流程" width="500" :before-close="handleClose5">
      <div class="isBack">
        <myform :fields="fields7" ref="form1" labelPosition="top" :model="model" class="m_t_10">
        </myform>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="danger" @click="submitQuery">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <component class="m_t_20" :is="FormComponents['ryfp']" v-if="taskId" :isEnabled="1" ref="ryfp" type="useForm"
    @resultData="resultData" />
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Upload, Right, EditPen, Search } from '@element-plus/icons-vue'
import {
  runTaskBatch, isEnrollFunding, isAssign, isRollback, batchStash, batchAssign,
  batchEnrollFunding, batchRepayment, batchDocUpload, batchRollback, isRepayment, updateStatus, batchHisDetail,
  batchIds, batchAudit,isApprove,runTaskAssign,runTaskGet
} from '../../../api/agent'
import { FormComponents } from '../../../components/formChildren/myComponents'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../utils/resetMessage'
import { copy, fileFormat,momentDate } from '../../../utils/date'
import { useStore } from '../../../store/index'
import { deptList } from '../../../api/system/authority'
import { cooperativeAgencyListAll, emplLstAll } from '../../../api/system/flowPath'
import { httpConfig } from '../../../utils/config'
import { financingBatchhNodeType } from '../../../type/agent'
import batchDetails from '../../../components/info/batchDetails.vue'
import batchData from '../../../components//info/batchData.vue'
import singleStrokeFiling from '../../../components/info/singleStrokeFiling.vue'
const values = {
  batchNo: '',//批次号
  bizKey: '',//项目搜索
  agencyProjectId: '',//经办机构  
  deptId: '',//业务部门
  province: '',//所在省
  city: '',//所在盟市
  county: '',//所在旗县
  status: '',//项目状态 1-正常 2-超时
  loanResult: '',//登记放款结果 1是 2否
  isBusinessManagement:false,
}
const model = {
  remark: '',
}
const model1 = {
  approveStatus: '',
  approveRemark: '',
}
const model2 = {
  urls: [],
}
const model3 = {
  empId: '',
}
const model4 = {
  repaymentStatus: '',
}
const   tableFields= [
        {
          label: '项目编号',
          prop: 'projectNo',
          width: '250px',
        },
        {
          label: '客户名称',
          prop: 'customerName',
          width: '250px',
        },
        {
          label: '产品名称',
          prop: 'productName',
          width: '250px',
        },
        {
          label: '最新审批金额(元)',
          prop: 'approveMoney',
          width: '250px',
        },
        {
          label: '最新审批期限(月)',
          prop: 'approvePeriod',
          width: '250px',
        },
        {
          label: '最新担保费率(%)',
          prop: 'guaranteeRate',
          width: '250px',
        },
        {
          label: '应收保费(元)',
          prop: 'receivablePremium',
          width: '250px',
        },
        {
          label: '保费计算是否一致',
          prop: 'isConsistent',
          width: '250px',
        },
        {
          label: '最新审批结论',
          prop: 'approveStatus',
          width: '250px',
        },
        {
          label: '项目状态',
          prop: 'masterStatus',
          width: '250px',
        },
      ]
export default defineComponent({
  name: '',
  components: {
    Right, batchDetails, batchData, singleStrokeFiling
  },
  setup() {
    const store = useStore();
    const data: financingBatchhNodeType = reactive({
      values: copy(values),
      list: [
        {
          name: '批次处理',
          id: '0',
        },
        {
          name: '批次详情',
          id: '1',
        },
        {
          name: '批次业务资料',
          id: '2',
        },
      ],
      current: 0,
      type: '1',
      information: {
        batchNo: '',
        nodeName: '',
        productName: '',
        agencyBranchName: '',
        area: '',
        submitter: '',
        submitterMobile: '',
        deptName: '',
        count: '',
        totalMoney: '',
        applyTime: '',
        productId: '',
        nodeId: '',
        flowId: '',
        customerStatus:0
      },
      fields: [
        {
          label: "项目搜索",
          prop: 'bizKey',
          placeholder: '客户名称/项目编号/证件号码',
          type: 'input',
          labelWidth: '70px'
        },
      ],
      fields1: [
        {
          label: "项目搜索",
          prop: 'bizKey',
          placeholder: '客户名称/项目编号/证件号码',
          type: 'input',
          labelWidth: '120px'
        },
        {
          label: "经办机构",
          prop: 'agencyProjectId',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "业务部门",
          prop: 'deptId',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "所在省",
          prop: 'province',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'name',
        },
        {
          label: "所在盟市",
          prop: 'city',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'name',
        },
        {
          label: "所在旗县",
          prop: 'county',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'name',
        },
        {
          label: "项目状态",
          prop: 'status',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "操作状态",
          prop: 'commitStatus',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "分配人处理结果",
          prop: 'loanResult',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
      ],
      isExpand: false,
      tableFields: tableFields,
      options: {
        agencyProjectId: [],
        loanResult: [
          {
            name: '是',
            id: 1
          },
          {
            name: '否',
            id: 2
          },
        ],
        status: [
        {
            name:'正常',
            id:'0'
          },
          {
            name:'在途',
            id:'1'
          },
          {
            name:'暂停',
            id:'2'
          },
          {
            name:'结清',
            id:'3'
          },
          {
            name:'解保',
            id:'4'
          },
          {
            name:'逾期',
            id:'5'
          },
          {
            name:'展期',
            id:'6'
          },
          {
            name:'预警',
            id:'7'
          },
          {
            name:'代偿',
            id:'8'
          },
        ],
        commitStatus: [
          {
            name: '未处理',
            id: 1
          },
          {
            name: '已处理',
            id: 2
          },
        ],
        province: [],
        city: [],
        county: [],
        approveStatus: [
          {
            name: '同意',
            id: 2
          },
          {
            name: '驳回',
            id: 3
          },
        ],
        empId: [],
        repaymentStatus: [
          {
            name: '结清',
            id: '0',
          },
          {
            name: '逾期',
            id: '1',
          },
          {
            name: '展期',
            id: '2',
          },
        ],
        deptId: [],
      },
      dialogVisible: false,
      model: copy(model),
      fields2: [
        {
          label: "回退意见备注",
          prop: 'remark',
          placeholder: '请输入意见备注',
          type: 'textarea',
          labelWidth: '70px'
        },
      ],
      fields7: [
        {
          label: "意见备注",
          prop: 'remark',
          placeholder: '请输入意见备注',
          type: 'textarea',
          labelWidth: '70px'
        },
      ],
      dialogVisible1: false,
      dialogVisible5: false,
      fields3: [
        {
          label: "审批状态",
          prop: 'approveStatus',
          placeholder: '请选择',
          type: 'select',
          labelWidth: '120px',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "审批意见",
          prop: 'approveRemark',
          placeholder: '请输入审批意见',
          type: 'textarea',
          labelWidth: '70px'
        },
      ],
      model1: copy(model1),
      dialogVisible2: false,
      rules: {
        approveStatus: [
          { required: true, message: '请选择审批状态', trigger: 'change' },
        ],
        empId: [
          { required: true, message: '请选择分配人员', trigger: 'blur' },
        ],
        repaymentStatus: [
          { required: true, message: '请选择登记还款状态', trigger: 'blur' },
        ],
      },
      fields4: [
        {
          label: "批量文件名称",
          prop: 'bizKey',
          placeholder: '请输入名称',
          type: 'input',
          labelWidth: '100px'
        },
      ],
      model2: copy(model2),
      uploadTable: [
        {
          label: '文件名称',
          prop: 'name',
        },
        {
          label: '上传人',
          prop: 'empName',
        },
        {
          label: '上传时间',
          prop: 'uploadTime',
        },
      ],
      selection: [],
      fields5: [
        {
          label: "分配人员",
          prop: 'empId',
          placeholder: '请选择分配人员',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          labelWidth: '80px'
        },
      ],
      model3: copy(model3),
      dialogVisible3: false,
      fields6: [
        {
          label: "登记还款结果",
          prop: 'repaymentStatus',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          labelWidth: '130px'
        },
      ],
      model4: copy(model4),
      dialogVisible4: false,
      action: httpConfig.upload,
      headers: {
        token: localStorage.getItem('Token')
      },
      index: 0,
      isLoan: false,//是否能登记放款
      // isHandle: false,//是否能分配处理人
      isBack: false,//是否能回退
      isPay: false,//是否能登记还款
      isApproval:false,//是否批量审批
      count: 0,
      listIds: [],//所有任务id
      isChecked: false,//是否全选
      category: '2',
      echoList: [],
      taskId: '',
      ids: [],
    })
    onBeforeMount(() => {
      data.options.province = JSON.parse(localStorage.getItem('districts'))
      data.type = route.query.type as string
      data.values.batchNo = route.query.batchNo as string
      data.category = route.query.category as string
      methods.getData()
    })
    const route = useRoute()
    const router = useRouter()
    const examineForm = ref()
    const tableRef = ref()
    const allocationForm = ref()
    const repaymentForm = ref()
    const ryfp=ref()
    const methods = {
      //文件上传之前校验格式
      beforeUpload(file: any) {
        return fileFormat(file, ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'png', 'jpg', 'jpeg', 'JPG', 'zip', 'txt', 'pptx', 'gif', 'rar', 'ppt','PNG','JPEG'], '')
      },
      getData() {
        //获取批次资料卡
        runTaskBatch({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.information = res
          if (res.area) {
            let area = JSON.parse(res.area)
            area = area.sort((a, b) => b.length - a.length)
            data.information.area = area[0].join('/')
          }
        })
        //获取角色列表
        emplLstAll({}).then((res: any) => {
          data.options.empId = res
        })
        //获取部门列表
        deptList({}).then((res: any) => {
          data.options.deptId = res
        })
        //获取机构列表
        cooperativeAgencyListAll({}).then((res: any) => {
          data.options.agencyProjectId = res
        })
         //是否能批量审批
         isApprove({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.isApproval = res
        })
        //是否能登记放款
        isEnrollFunding({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.isLoan = res
        })
        // //是否能分配处理人
        // isAssign({ batchNo: route.query.batchNo as string }).then((res: any) => {
        //   data.isHandle = res
        // })
        //是否能回退
        isRollback({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.isBack = res
        })
        //是否是登记还款
        isRepayment({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.isPay = res
        })
        batchIds({ batchNo: route.query.batchNo as string }).then((res: any) => {
          data.listIds = res
        })
        // batchHisDetail({ batchNo: route.query.batchNo as string }).then((res:any)=>{

        // })
      },
      //根据选择省市区获取相关数据
      handleSelect(props: string) {
        if (props == 'province') {
          data.values.city = ''
          data.values.county = ''
          data.options.city = data.options.county = []
          data.options.province.map(item => {
            if (item.name == data.values.province) {
              data.options.city = item.districts
            }
          })
        } else if (props == 'city') {
          data.values.county = ''
          data.options.city.map(item => {
            if (item.name == data.values.city) {
              data.options.county = item.districts
            }
          })
        }
      },
      //重置表单搜索
      resetting() {
        data.values = copy(values)
        data.values.batchNo = route.query.batchNo as string
        tableRef.value.resettingTable(data.values)
        data.options.city=data.options.county=[]
      },
      //搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      //获取表格选中项
      selecSelection(selection: any) {
        data.selection = selection
        data.isChecked = false
      },
      //是否展开筛选
      screen(flag: boolean) {
        data.isExpand = flag
      },
      //关闭回退按钮弹窗并清空表单
      handleClose() {
        data.dialogVisible = false
        data.model = copy(model)
      },
      handleClose5() {
        data.dialogVisible5 = false
        data.model = copy(model)
      },
      //关闭批量审批按钮弹窗并清空表单
      handleClose1() {
        data.dialogVisible1 = false
        data.model1 = copy(model1)
      },
      //打开批量审批按钮弹窗
      batchApproval() {
        if (data.selection.length == 0 && !data.isChecked) return Message({ type: 'warning', message: '请选择要操作的数据' })
        data.dialogVisible1 = true
      },
      handleClose2() {
        data.dialogVisible2 = false
        data.model2 = copy(model2)
      },
      handle(row) {
        router.push({ path: '/agent/noFinancingBatch/handle', query: { id: row.id, projectId: row.projectId, productId: data.information.productId, nodeId: data.information.nodeId, nodeName: data.information.nodeName, type: '1',category:'3' } })
      },
      //批量审批回调
      examineQuery() {
        examineForm.value.verification().then(() => {
          let ids = []
          if (data.isChecked) {
            ids = copy(data.listIds)
          } else {
            ids = data.selection.map(item => item.id)
          }
          batchStash({ ids: ids, approveStatus: data.model1.approveStatus, approveRemark: data.model1.approveRemark }).then(() => {
            updateStatus({ ids: ids }).then(() => {
              Message({ type: 'success', message: '审批成功' })
              methods.handleClose1()
              tableRef.value.handleCurrentChange(1)
              tableRef.value.clearSelection()
              data.selection = []
            })

          })
        })
      },
      //打开分配人弹窗
      allocation() {
       
        data.dialogVisible3 = true
      },
      //关闭分配处理人弹窗
      handleClose3() {
        data.dialogVisible3 = false
        data.model3 = copy(model3)
      },
      //分配处理人回调
      allocationQuery() {
        allocationForm.value.verification().then(() => {
          let ids = copy(data.listIds)
          batchAssign({ taskIds: ids, empId: data.model3.empId }).then(() => {
            Message({ type: 'success', message: '分配成功' })
            methods.handleClose3()
            tableRef.value.handleCurrentChange(1)
            tableRef.value.clearSelection()
            data.selection = []

          })
        })
      },
      //批量登记放款
      registration() {
        if (data.selection.length == 0 && !data.isChecked) return Message({ type: 'warning', message: '请选择要操作的数据' })
        ElMessageBox.confirm(
          '确定将所有未放款项目统一登记为未放款？',
          '批量登记未放款',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            let ids = []
            if (data.isChecked) {
              ids = copy(data.listIds)
            } else {
              ids = data.selection.map(item => item.id)
            }
            batchEnrollFunding({ taskIds: ids }).then(() => {
              updateStatus({ ids: ids }).then(() => {
                Message({ type: 'success', message: '登记成功' })
                tableRef.value.handleCurrentChange(1)
                tableRef.value.clearSelection()
                data.selection = []
              })

            })
          })
      },
      //批量登记还款打开弹窗
      repayment() {
        if (data.selection.length == 0 && !data.isChecked) return Message({ type: 'warning', message: '请选择要操作的数据' })
        data.dialogVisible4 = true
      },
      //批量登记还款关闭弹窗并清除表单
      handleClose4() {
        data.dialogVisible4 = false
        data.model4 = copy(model4)
      },
      //批量登记还款回调
      repaymentQuery() {
        repaymentForm.value.verification().then(() => {
          let ids = []
          if (data.isChecked) {
            ids = copy(data.listIds)
          } else {
            ids = data.selection.map(item => item.id)
          }
          batchRepayment({ taskIds: ids, repaymentStatus: data.model4.repaymentStatus }).then(() => {
            updateStatus({ ids: ids }).then(() => {
              Message({ type: 'success', message: '登记成功' })
              methods.handleClose4()
              tableRef.value.handleCurrentChange(1)
              tableRef.value.clearSelection()
              data.selection = []
            })
          })
        })
      },
      //上传文件
      onSuccess(e: any, file: any) {
        if (e.code == '000000') {
          let obj: any = {
            url: e.data,
            empName: JSON.parse(<string>localStorage.getItem('userVO')).name,
            empId: JSON.parse(<string>localStorage.getItem('userVO')).id,
            uploadTime: momentDate('YYYY-MM-DD HH:mm'),
            name: file.name,
          }
          data.model2.urls.push(obj)
        } else {
          Message({ type: 'error', message: e.msg })
        }
      },
      onSuccess1(e: any, file: any) {
        if (e.code == '000000') {
          data.model2.urls[data.index].url = e.data,
            data.model2.urls[data.index].name = file.name
          data.model2.urls[data.index].empName = JSON.parse(<string>localStorage.getItem('userVO')).name
          data.model2.urls[data.index].empId = JSON.parse(<string>localStorage.getItem('userVO')).id,
            data.model2.urls[data.index].uploadTime = momentDate('YYYY-MM-DD HH:mm')

        } else {
          Message({ type: 'error', message: e.msg })
        }
      },
      //预览文件
      preview(row: any) {
        window.open(row.url, '_blank')
      },
      //删除文件
      deleteOut(index: number) {
        ElMessageBox.confirm(
          '是否删除当前文件?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
          }
        )
          .then(() => {
            data.model2.urls.splice(index, 1)
          })
      },
      //重新上传
      reUpload(index: number) {
        data.index = index
      },
      //批量文件上传回调
      fileQuery() {
        if (data.model2.urls.length == 0) return Message({ type: 'warning', message: '请上传文件' })
        batchDocUpload({ urls: data.model2.urls, flowId: data.information.flowId, batchNo: data.information.batchNo }).then(() => {
          Message({ type: 'success', message: '提交成功' })
          tableRef.value.handleCurrentChange(1)
          tableRef.value.clearSelection()
          data.selection = []
          methods.handleClose2()
        })
      },
      //打开回退弹窗
      openBack() {
        if (data.selection.length == 0 && !data.isChecked) return Message({ type: 'warning', message: '请选择要操作的数据' })
        data.dialogVisible = true
      },
      //回退弹窗回调
      backQuery() {
        let ids = []
        if (data.isChecked) {
          ids = copy(data.listIds)
        } else {
          ids = data.selection.map(item => item.id)
        }
        batchRollback({ ids: ids, remark: data.model.remark }).then(() => {
          Message({ type: 'success', message: '提交成功' })
          tableRef.value.handleCurrentChange(1)
          tableRef.value.clearSelection()
          data.selection = []
          methods.handleClose()
          methods.getData()
        })
      },
      //表格请求数据之后回调接口响应数据
      init(res: any) {
        data.count = res.count
        data.tableFields=copy(tableFields)
        data.echoList = res.records.filter((item: any) => {
          return item.isCommit == 1
        })
        if (res.assignee) {
          let obj = {
            label: '分配处理人结果',
            prop: 'assignee',
            width: '250px',
          }
          data.tableFields.splice(6, 0, obj)
        } if (res.loanResult) {
          let obj = {
            label: '登记放款结果',
            prop: 'loanResult;',
            width: '250px',
          }
          data.tableFields.splice(6, 0, obj)
        }
      },
      //列表待处理处理完之后提交下一步流程
      submissionProcess() {
        data.dialogVisible5 = true

      },

      submitQuery() {
        batchAudit({ ids: data.listIds, remark: data.model.remark, batchNo: route.query.batchNo as string }).then((res:any) => {
          Message({ type: 'success', message: '提交成功' })
          // tableRef.value.handleCurrentChange(1)
          // tableRef.value.clearSelection()
          // data.selection = []
          // methods.getData()
          methods.handleClose5()
          if (res.length == 0) { 
            router.go(-1)
          } else {
            data.ids = res
            data.taskId = res[0]
          }
        })
      },
      resultData(val) {
        batchAssign({ taskIds: data.ids, empId: val.empId }).then(() => {
          Message({ type: 'success', message: '提交成功' })
          ryfp.value.clearValue()
          data.taskId=''
          router.go(-1)
        })
      },
      detail(row){
        console.log(row);
     
        runTaskGet({ id: row.id as string, type: route.query.type as string, category: route.query.category as string }).then(res=>{
          console.log(res);
          res.forms=res.formCodes
          localStorage.setItem('item', JSON.stringify(res))
                router.push('/service/singleFinancing/form?category=4')
        })
      }
    }
    return {
      ...toRefs(data),
      ...methods, FormComponents, Upload, EditPen, Search, examineForm,
       tableRef, allocationForm, repaymentForm,ryfp
    }
  }
})
</script>
<style scoped lang='scss'>
.index {
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;
}

.left {
  width: 370px;
  height: 100%;
  overflow-y: auto;

  .box {
    background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
    box-sizing: border-box;
    border: 1px solid;
    border-image: linear-gradient(168deg, rgba(155, 188, 235, 0.5) 1%, rgba(102, 142, 197, 0) 94%) 1;
    border-radius: 6px;
    box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    width: 100%;
    padding: 15px;

    .label {
      text-align: right;
      width: 90px;
      color: rgba(0, 0, 0, 0.4);
      font-size: 14px;
      display: block !important;
    }

    .input {
      background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
      width: calc(100% - 120px);
      height: 32px;
      border-radius: 2px;
      background: #fff;
      padding: 0px 12px;
      color: rgba(0, 0, 0, 0.9);
      font-size: 13px;
      word-wrap: break-word;
      /* 允许在单词内换行 */
      overflow-wrap: break-word;
      /* 同上，现代浏览器推荐使用这个属性别名 */
      white-space: normal;
      /* 允许自动换行 */
    }

    .customerName {
      width: 130px;
      word-wrap: break-word;
      /* 允许在单词内换行 */
      overflow-wrap: break-word;
      /* 同上，现代浏览器推荐使用这个属性别名 */
      white-space: normal;
      /* 允许自动换行 */
    }

    .task {
      color: #1878FF !important;
    }
  }
}

.right {
  width: calc(100% - 380px);
  height: 100%;
  margin-left: 10px;
  ;
  border-radius: 6px;

  .tab {
    width: 128px;
    height: 53px;
    border-radius: 6px 6px 0px 0px;
    background: linear-gradient(173deg, #FFFFFF 12%, #F3F3F3 60%);
    box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    color: #86909C;
    font-size: 16px;
    cursor: pointer;
  }

  .active {
    background: linear-gradient(173deg, #F5F9FF 10%, #FFFFFF 60%) !important;
    color: #1B5ED1 !important;
    box-shadow: 5px 0px 5px -2px rgba(9, 20, 29, 0.03) !important;
  }

  .forms {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    padding: 1px 32px 24px 32px;
    overflow-y: auto;
  }

  .content {
    width: calc(100% - 48px);
    margin-top: 10px;
    background: rgba(24, 120, 255, 0.02);
    border-radius: 0px 0px 6px 6px;
    padding: 12px 24px;

    .expand {
      color: #1878FF;
      font-size: 14px;
      margin-left: 8px;
      cursor: pointer;
    }

    .tips {
      color: rgba(0, 0, 0, 0.4);
      font-size: 0.75vw;
      margin-left: 5px;

      .num {
        color: red !important;
      }
    }

    .all {
      color: #1878FF;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
      width: 80px;
    }

    .cancelAll {
      color: #F53F3F;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
      width: 80px;
    }
  }


}
</style>
<style lang='scss'>
.isBack {
  .el-form-item {
    width: 100% !important;
  }

  .el-form-item__content {
    width: 100% !important;

    .el-input,
    .el-select {
      width: 100% !important;
    }
  }

}

.searchForm {

  .el-input,
  .el-select {
    width: 11.1vw !important;
  }
}
</style>